<template>
    <view class="cost pl-30 pr-30 pt-30 mt-24 pb-80">
        <view class="ft-40 t-3 bold">费用明细</view>
        <view class="cost-list align-center space-between pl-24 pr-24 mt-24">
            <view class="ft-32 t-3 bold">房费</view>
            <view class="flex-auto align-center flex-end">
                <text class="ft-28 t-6" v-if="checkInInfo.nightsCount > 1">每间每晚</text>
                <text class="ft-24 t-3">￥</text>
                <text class="ft-36 t-3 bold">{{ info.averagePrice || '--' }}</text>
            </view>
        </view>
        <view class="mt-50">
            <view class="flex-end align-end ft-28 t-6 line-height1 mb-16">
                <text v-if="checkInInfo.nightsCount > 1">每间每晚￥{{ info.averagePrice }}</text>
                <text v-if="!isPositiveInteger(info.averagePrice) && checkInInfo.nightsCount > 1"
                    >≈</text
                >
                <text class="ft-24 t-3">￥</text>
                <text
                    class="ft-36 t-3 bold"
                    v-if="!isPositiveInteger(info.averagePrice) && checkInInfo.nightsCount > 1"
                    >{{ getPrice(info.averagePrice) }}</text
                >
                <text class="ft-36 t-3 bold" v-else>{{ info.averagePrice }}</text>
            </view>
            <view
                class="text-right ft-24 t-9"
                v-if="!isPositiveInteger(info.averagePrice) && checkInInfo.nightsCount > 1"
            >
                *小数点向上取整展示, 以实际每晚费用为准
            </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 费用明细
 * @author yinzhi
 * @date 2025-05
 */
import { computed, defineComponent } from 'vue'
defineComponent({
    name: 'ExpenseDetails'
})
import { useStore } from 'vuex'
const store = useStore()
// 入住信息
const checkInInfo = computed(() => store.state.platform.checkInInfo || '')

// 接收父组件传递的 props
const props = defineProps({
    info: {
        type: Object,
        default: () => {}
    }
})

/**
 * @description 判断价格是否正整数
 * @param {string|number} value 要判断的价格
 * @returns {boolean} 是整数返回 true，否则返回 false
 */
const isPositiveInteger = price => {
    const num = Number(price)
    return Number.isInteger(num)
}

// 向上取整数
const getPrice = value => {
    const num = Number(value)
    return Math.ceil(num) || '--'
}
</script>

<style scoped lang="scss">
.cost {
    background: $uni-bg-color;
    position: relative;
    z-index: 30;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.02);
    &-list {
        background: rgba($color: $uni-color-primary, $alpha: 0.1);
        height: 100rpx;
    }
}
</style>
